import React from 'react';
import './horizontal_2.css';
/*import   {fun1} from  './horizontal.js';*/


class Horizontal_2 extends React.Component{
    constructor(props){
        super(props);
        this.saveRef = ref => {this.refDom = ref};
        this.textSize=this.textSize.bind(this);
        this.getChineseLength=this.getChineseLength.bind(this);
        this.getLength=this.getLength.bind(this);
        this.getNumberLength=this.getNumberLength.bind(this);
        this.getChineseChar=this.getChineseChar.bind(this);
        this.rdCss=this.rdCss.bind(this);
        this.updateData=this.updateData.bind(this);
        this.onClickOutSideHandler=this.onClickOutSideHandler.bind(this);
        this.state={
            eid:props.eid,
            maxContentHeight:'0'
        }
    }
    componentDidMount(){

        this.props.onRef(this);
        this.updateData();
        const {datainfo}=this.props;
        const {eid}=this.state;
        if(datainfo!=null&&datainfo.length>0){
            let timelinedata1=".timeline-data-"+eid;
            $(timelinedata1).scrollLeft(100000);
        }
        window.addEventListener('click',this.onClickOutSideHandler,true);

    }

    componentWillUnmount(){
        window.removeEventListener('click',this.onClickOutSideHandler,true);
    }

    onClickOutSideHandler(e){
        const {handleRefresh}=this.props;
        var targetDiv=e.target.className || e.srcElement.className;
        if(targetDiv && targetDiv=='e9header-font-setting-item'){
            setTimeout(handleRefresh,0);
        }
    }

    componentDidUpdate(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        if(datainfo!=null&&datainfo.length>0){
            let timelinedata1=".timeline-data-"+eid;
            $(timelinedata1).scrollLeft(100000);
        }

        let {contentHeight}=this.state
        if(datainfo!=null&&datainfo.length>0) {
            datainfo.map((item, i) => {
                let contentDivClass=".timeline-data-"+eid+" .contentDiv_"+i;
                let contentDiv=document.querySelector(contentDivClass);
                let Height=parseInt(Number(this.rdCss(contentDiv, 'height')));
                if(parseInt(Height)>parseInt(contentHeight)){
                    contentHeight=Height;
                }
            })
        }
        let timelineDivClass=".timeline-horizontal-2 .timeline-"+eid;
        document.styleSheets[0].addRule(timelineDivClass,'height:'+(parseInt(contentHeight)+100)+'px !important');

    }

    updateData(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        if(datainfo!=null&&datainfo.length>0){
            let timelinedata1=".timeline-data-"+eid;
            $(timelinedata1).scrollLeft(100000);
        }

        let contentHeight=0;
        if(datainfo!=null&&datainfo.length>0) {
            datainfo.map((item, i) => {
                let contentDivClass=".timeline-data-"+eid+" .contentDiv_"+i;
                let contentDiv=document.querySelector(contentDivClass);
                let Height=parseInt(Number(this.rdCss(contentDiv, 'height')));
                if(parseInt(Height)>parseInt(contentHeight)){
                    contentHeight=Height;
                }
            })
        }
        this.setState({maxContentHeight:parseInt(contentHeight)});

    }

    rdCss() {
        var obj = arguments[0];
        var options = arguments[1];
        if (!!obj === false || typeof options === 'undefined') {
            return null;
        }
        if (typeof options === 'string') {
            let res = document.defaultView.getComputedStyle(obj, null)[options];
            res = Number(res.replace('px', ''));
            return res;
        }
        if (typeof options === 'object') {
            for (var i in options) {
                obj.style[i] = options[i];
            }
        }
    }

    getChineseLength(str){
        let chinese= str.match(/[\u4e00-\u9fa5]/g);
        if(chinese==null){
            return 0;
        }
        return chinese.length;
    }

    getChineseChar(str){
        let chineseChar=str.match(/[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/g);
        if(chineseChar==null){
            return 0;
        }
        return chineseChar.length
    }

    getLength(str){
        if(/[a-z]/i.test(str)){
            return str.match(/[a-z]/ig).length;
        }
        return 0;
    }
    getNumberLength(str){
        if(/[0-9]/i.test(str)){
            return str.match(/[0-9]/ig).length;
        }
        return 0;
    }


    textSize(fontSize, text) {
        let span = document.createElement("span");
        let result = {};
        result.width = span.offsetWidth;
        result.height = span.offsetHeight;
        span.style.visibility = "hidden";
        span.style.fontSize = fontSize;
        span.style.lineHeight = '20px';//最好设置行高 方便项目中计算
        span.style.fontFamily = '-apple-system, "PingFang SC", "Helvetica Neue", Helvetica,\n' +
            'STHeiTi, sans-serif';//字体 可以替换为项目中自己的字体
        span.style.display = "inline-block";
        document.body.appendChild(span);
        if (typeof span.textContent !== "undefined") {
            span.textContent = text;
        } else {
            span.innerText = text;
        }
        result.width = parseFloat(window.getComputedStyle(span).width) - result.width;
        result.height = parseFloat(window.getComputedStyle(span).height) - result.height;
        span.parentNode.removeChild(span);//删除节点
        return result;
    }

    render(){
        const {datainfo,contentBgColor}=this.props;
        const {eid}=this.state;
        let {maxContentHeight}=this.state;

        let contentHeight=0;
        let divWidth=0;
        if(datainfo!=null&&datainfo.length>0) {
            datainfo.map((item, i) => {
                let contentDivClass=".timeline-data-"+eid+" .contentDiv_"+i;
                let contentDiv=document.querySelector(contentDivClass);
                let Height=parseInt(Number(this.rdCss(contentDiv, 'height')));
                if(parseInt(Height)>parseInt(contentHeight)){
                    contentHeight=Height;
                }

                let dataSpanClass=".timeline-horizontal-2 .data_"+eid+"_"+i;
                let dataSpan=document.querySelector(dataSpanClass);
                let timeLineWidth=parseInt(Number(this.rdCss(dataSpan, 'width')));
                if (timeLineWidth < 110) {
                    divWidth += 110 + 50;
                } else {
                    divWidth += timeLineWidth + 50;
                }
            })
        }
        if(contentHeight==0){
            contentHeight=maxContentHeight;
        }
        divWidth+=100;

        let bgColor=contentBgColor;
        if(bgColor=="transparent"){
            bgColor="#ffffff";
        }

        let bStyle={width:'20px',height:'20px',position:'absolute',top:'0',right:'0',left:'-6px'};
        let rightStyle={width:'0',height:'0',display:'block',position:'absolute',top:'0',borderTop:'10px transparent dashed',borderRight:'10px transparent dashed',borderBottom:'10px transparent dashed',borderLeft:'18px solid #adadad'};
        let leftStyle={width:'0',height:'0',display:'block',position:'absolute',top:'0',borderTop:'10px transparent dashed',borderRight:'10px transparent dashed',borderBottom:'10px transparent dashed',borderLeft:'10px solid '+bgColor+''};
        let rightDateArrow1Style={borderLeft:'10px '+bgColor+' solid'}



        let minTimeLineWidth=500;

        let style={width:'20px',height:'20px',left:divWidth,top:'-10px'};

        let maxHeight=parseInt(contentHeight)+100;

        if(maxHeight<150){
            maxHeight=150;
        }
        let aWidth=0;
        if(datainfo!=null&&datainfo.length>0){
            let timelinedata=".timeline-data-"+eid;
            $(timelinedata).scrollLeft(100000);
        }


        return<div className="timeline-horizontal-2 ">
                {   datainfo!=null&&datainfo.length>0?
                    <div className={"timeline timeline-"+eid} style={{height:maxHeight}}>
                        <div className={"timeline-data timeline-data-"+eid}>
                            <div className="horizontal_2" style={{width:divWidth}}>
                                <ol>
                                {
                                    datainfo.map((item,i)=>{

                                    let chineseCount=this.getChineseLength(item.timeline);
                                    let chineseCharCount=this.getChineseChar(item.timeline);
                                    let timeLineWidth=chineseCount*16+chineseCharCount*16+parseInt(this.getLength(item.timeline))*8+this.getNumberLength(item.timeline)*9+((item.timeline).length-chineseCount-chineseCharCount-parseInt(this.getLength(item.timeline)) -parseInt(this.getNumberLength(item.timeline)))*5+25;

                                    timeLineWidth<110?timeLineWidth=110:'';
                                    timeLineWidth=parseInt(timeLineWidth)+10;
                                    let timeLineLeftWidth=0;
                                    if(i>0){
                                        let chineseCount1=this.getChineseLength(datainfo[i-1].timeline);
                                        let chineseCharCount1=this.getChineseChar(datainfo[i-1].timeline);
                                        timeLineLeftWidth=(chineseCount1)*16+chineseCharCount1*16+this.getLength(datainfo[i-1].timeline.trim())*8+this.getNumberLength(datainfo[i-1].timeline)*9+((datainfo[i-1].timeline.trim()).length-chineseCount1-chineseCharCount1-this.getLength(datainfo[i-1].timeline)  -parseInt(this.getNumberLength(datainfo[i-1].timeline)))*5+25;
                                        timeLineLeftWidth<110?timeLineLeftWidth=110:'';
                                    }
                                    i==0?aWidth+=50:aWidth+=timeLineLeftWidth+50;

                                    const leftWidth=parseInt(aWidth);
                                    let conetentWidth=timeLineWidth+12;

                                    let contentdata=item.content;
                                    let contentArr=contentdata.split(/\n/g);

                                    return <li>
                                                <a href="#0" style={{left: i==0?'50px': leftWidth}} className={"num_"+i%5+" data_"+eid+"_"+i} >
                                                    <span class="arrow-right arrow-box">
                                                        <b class="right-date-1"><i className={"right-date-arrow1-1 num_"+i%5 } ></i><i class="right-date-arrow2-1" style={rightDateArrow1Style}></i></b>
                                                    </span>
                                                    <span className={"dateSpan wea-f12"} style={{width:timeLineWidth}}>{item.timeline}</span>
                                                    <span class="arrow-right arrow-box">
                                                        <b class="right-date" style={{left:timeLineWidth}}><i class="right-date-arrow1" id={"right-arrow1-"+i%5}></i><i class="right-date-arrow2" id={"right-arrow2-"+i%5}></i></b>
                                                    </span>
                                                </a>
                                                <div id={'contentDiv'} className={'wea-f12 contentDiv_'+i} style={{left:i==0?'50px':leftWidth,wordBreak:'break-all',width:conetentWidth}}>
                                                    {
                                                        contentArr.map((item,i)=>{
                                                            if(item==""){
                                                                return <span style={{display:'block',height:'20px'}}></span>
                                                            }
                                                            return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                                        })
                                                    }
                                                </div>
                                            </li>
                                    })
                                }
                                </ol>
                                <span className="filling-line" aria-hidden="true"></span>
                                <div style={style}>
                                    <b className="right" style={bStyle}><i className="right-arrow1" style={rightStyle}></i><i className="right-arrow2" style={leftStyle}></i></b>
                                </div>
                            </div>
                        </div>
                    </div>
                    :
                    <div style={{textAlign:'center'}}  ><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
                    }
                </div>

    }

}

export default Horizontal_2;